<template>
    <div class="course-content-form-page">
        <el-card shadow="never" v-loading="loading">
            <el-form
                :model="form"
                :rules="rules"
                ref="form"
                label-position="right"
                label-width="120px">
                <el-form-item label="主题名称:" prop="name">
                    <el-input
                        v-model.trim="form.name"
                        class="input-width"
                        placeholder="请输入主题名称"></el-input>
                </el-form-item>
                <el-form-item label="主题描述:" prop="description">
                    <el-input
                        v-model.trim="form.description"
                        class="input-width"
                        placeholder="请输入主题描述"></el-input>
                </el-form-item>
                <el-form-item label="建议:">
                    <el-input
                        rows="10"
                        type="textarea"
                        v-model="form.suggest"
                        class="w-2/3"
                        placeholder="请输入主题描述"></el-input>
                </el-form-item>
                <el-form-item label="角色&主题分类:" required>
                    <el-button type="primary" @click="onDialog('visible')">关联角色&主题分类</el-button>
                    <el-table :data="selectRow ? [selectRow] : []" v-if="selectRow">
                        <el-table-column label="角色名称" prop="theme"/>
                        <el-table-column label="主题分类名称" prop="name"/>
                        <el-table-column align="center" label="操作">
                            <template slot-scope="{row}">
                                <el-button @click="themeChange(row)" type="danger">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="课程:">
                    <el-button type="primary" @click="onDialog('visible1')">关联课程库</el-button>
                    <el-table :data="courseShow" v-if="courseShow.length">
                        <el-table-column label="课程名称" prop="name"/>
                        <el-table-column label="课程链接" prop="url"/>
                        <el-table-column align="center" label="操作">
                        <template slot-scope="{row}">
                            <el-button @click="handleCourse(row)" type="danger">移除</el-button>
                        </template>
                    </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button @click="onSave" type="primary">确 定</el-button>
                <el-button @click="onReturn">返 回</el-button>
            </div>
        </el-card>

        <el-dialog
            title="课程库列表"
            :visible.sync="visible1"
            width="60%">
            <div>
                <div class="flex items-center mb-2">
                    <label>课程库名称：</label>
                    <el-input
                        v-model="courseForm.name"
                        class="input-width mr-2"
                        placeholder="请输入课程库名称"></el-input>
                    <el-button @click="getCourse($event, true)" type="primary">搜索</el-button>
                </div>
                <el-table
                    :data="courseList"
                    v-loading="loading">
                    <el-table-column label="课程名称" prop="name"/>
                    <el-table-column label="课程链接" prop="url"/>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="{row}">
                            <el-button
                                @click="handleCourse(row)"
                                type="primary"
                                v-if="courseIds.indexOf(row.id) === -1">选择</el-button>
                            <el-button
                                @click="handleCourse(row)"
                                type="success"
                                v-else>已选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div v-if="courseForm.total > 0" class="footer flex justify-end items-center">
                    <el-pagination
                        @current-change="getCourse"
                        @size-change="getCourse"
                        class="center"
                        :current-page.sync="courseForm.page"
                        :page-size.sync="courseForm.size"
                        :page-sizes="[10, 25, 50]"
                        layout="sizes, total, prev, pager, next, jumper"
                        :total="courseForm.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            title="角色&主题分类列表"
            :visible.sync="visible"
            width="60%">
            <div>
                <!-- 角色&主题分类选择 -->
                <div class="flex items-center mb-2">
                    <label>类型：</label>
                    <el-select
                        clearable
                        v-model="themeForm.themeId"
                        class="input-width"
                        placeholder="请选择类型">
                        <el-option
                            v-for="item in themeOption"
                            :key="item.id"
                            :label="item.theme"
                            :value="item.id"></el-option>
                    </el-select>
                    <label class="ml-2">主题分类名称：</label>
                    <el-input
                        v-model="themeForm.keyword"
                        class="input-width mr-2"
                        placeholder="请输入主题分类名称"></el-input>
                    <el-button @click="getTheme($event, true)" type="primary">搜索</el-button>
                </div>
                <el-table
                    :data="themeList"
                    v-loading="loading">
                    <el-table-column label="角色名称" prop="theme"/>
                    <el-table-column label="主题分类名称" prop="name"/>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="{row}">
                            <el-button
                                v-if="selectRow.id !== row.id"
                                @click="themeChange(row)"
                                type="primary">选择</el-button>
                            <el-button
                                v-else
                                @click="themeChange(row)"
                                type="success">已选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div v-if="themeForm.total > 0" class="footer flex justify-end items-center">
                    <el-pagination
                        @current-change="getTheme"
                        @size-change="getTheme"
                        class="center"
                        :current-page.sync="themeForm.page"
                        :page-size.sync="themeForm.size"
                        :page-sizes="[10, 25, 50]"
                        layout="sizes, total, prev, pager, next, jumper"
                        :total="themeForm.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    components: {
    },
    data() {
        return {
            loading: false,
            visible: false,
            visible1: false,
            id: '',

            form: {
                name: '',
                description: '',
                suggest: '',
                theme_id: '',
                ability_id: '',
                course_ids: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入主题名称', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请输入主题描述', trigger: 'blur' },
                ],
            },

            themeList: [],
            themeForm: {
                page: 1,
                size: 10,
                total: 0,
                keyword: '',
            },
            selectRow: '',
            themeOption: [],

            courseList: [],
            courseIds: [],
            courseForm: {
                page: 1,
                size: 10,
                total: 0,
                name: '',
            },
            courseShow: [],
        };
    },
    methods: {
        onReturn() {
            this.$router.back();
        },
        onDialog(text) {
            this[text] = !this[text];
        },

        // form
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    const select = this.selectRow;
                    if (!select) return $ele.$message.warning('请选择角色&主题分类');

                    this.form.theme_id = select.theme_id;
                    this.form.ability_id = select.id;
                    this.form.course_ids = this.courseIds;
                    this.form.suggest = this.form.suggest.replace(/\n/g, '<br/>');

                    this.postData();
                }
            });
        },
        postData() {
            let method = 'post';
            let message = '新增成功';

            if (this.form.id) {
                method = 'put';
                message = '编辑成功';
            }

            this.loading = true;
            API[method]('elective/content', this.form).then(() => {
                $ele.$message.success(message);
                this.onReturn();
            }).finally(() => this.loading = false);
        },

        fetchData() {
            this.loading = true;
            API.get(`elective/content/${this.id}`).then((res) => {
                this.form = res;
                this.form.suggest = res.suggest.replace(/<br\/>/g, '\n');
                this.selectRow = {
                    id: res.ability_id,
                    theme_id: res.theme_id,
                    theme: res.theme,
                    name: res.ability,
                };

                if (res.recommends && res.recommends.length) {
                    for (const val of res.recommends) {
                        this.courseIds.push(val.id);
                    }
                    this.courseShow = res.recommends;
                }
            }).finally(() => {
                this.loading = false;
            });
        },
        getTheme(e, page) {
            if (page) this.themeForm.page = 1;
            this.loading = true;
            API.get('elective/ability', {params: this.themeForm}).then((res) => {
                this.themeList = res.content;
                this.themeForm.total = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },

        getCourse(e, page) {
            if (page) this.courseForm.page = 1;
            this.loading = true;
            API.get('recommend_course', {params: this.courseForm}).then((res) => {
                this.courseList = res.content;
                this.courseForm.total = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },

        themeChange(e) {
            const row = this.selectRow;
            if (e.id === row.id) {
                this.selectRow = '';
            } else this.selectRow = {...e};
        },

        handleCourse(e) {
            const list = this.courseIds;
            let courseShow = [...this.courseShow];
            if (list.indexOf(e.id) === -1) {
                this.courseIds.push(e.id);
                courseShow.push(e);
            } else {
                this.courseIds.splice(list.indexOf(e.id), 1);
                courseShow = courseShow.filter(item => {
                    if (item.id === e.id) return false;
                    return item;
                });
            }
            this.courseShow = courseShow;
        },

        getThemeOption() {
            API.get('elective/theme/list').then(res => {
                this.themeOption = res;
            });
        },
    },
    mounted() {
        const id = this.$route.params.id;

        if (id) {
            this.id = id;
            this.fetchData();
        }

        this.getTheme();
        this.getCourse();
        this.getThemeOption();
    },
};
</script>

<style lang="scss">
.course-content-form-page {
    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }

    .input-width {
        max-width: 300px;
    }

    .el-dialog__body {
        height: 560px;
        overflow-y: auto;
    }
}
</style>
